<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<style>
  * {
    padding: 0;
    margin: 0;
  }

  .main {
    width: 100%;
    height: 100%;
    position: relative;
  }

  .x1 {
    position: absolute;
    left: 200px;
    top: 100px;
    font-size: 40px;
    color: rgb(170, 10, 10);
    /* font-family: Hanzipen SC; */
  }
  .x6 {
    position: absolute;
    left: 100px;
    top: 100px;
    font-size: 40px;
    color: rgb(6, 27, 85);
    /* font-family: Hanzipen SC; */
  }

  .x2 {
    position: absolute;
    right: 200px;
    top: 100px;
    font-size: 40px;
    color: rgb(170, 10, 10);
    /* font-family: Hanzipen SC; */
  }

  .x3 {
    position: absolute;
    right: 300px;
    top: 100px;
    font-size: 40px;
    color: rgb(170, 10, 10);
    /* font-family: Hanzipen SC; */
  }
  .x7 {
    position: absolute;
    right: 100px;
    top: 100px;
    font-size: 40px;
    color: rgb(170, 10, 10);
    /* font-family: Hanzipen SC; */
  }

  .x4 {
    position: absolute;
    left: calc(50% - 110px);
    top: 50%;
    width: 220px;
    /*设置按钮宽度*/
    height: 40px;
    /*设置按钮高度*/
    color: white;
    /*字体颜色*/
    background-color: rgb(224, 139, 196);
    /*按钮背景颜色*/
    border-radius: 8px;
    /*让按钮变得圆滑一点*/
    border-width: 0;
    /*消去按钮丑的边框*/
    margin: 0;
    outline: none;
    /*取消轮廓*/
    font-family: KaiTi;
    /*字体设置为楷体*/
    font-size: 20px;
    /*设置字体大小*/
    text-align: center;
    /*字体居中*/
    cursor: pointer;
    /*设置鼠标箭头手势*/
  }

  .x4:hover {
    /*鼠标移动时的颜色变化*/
    background-color: rgb(121, 69, 108);
  }
  .x5{
    position: absolute;
    left: calc(50% - 250px);
    top: 100px;
    width: 500px; 
    height: 200px; 
    background-color: pink;
    color: #fff;
    line-height: 200px;
    font-size: 22px;
    text-align: center;
    border-radius: 20px;
    display: none;
  }
</style>

<body>
  <canvas id="christmasCanvas"
    style="top: 0px; left: 0px; z-index: 5000; position: fixed; pointer-events: none;"></canvas>
  <div class="main">
    <img
      src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1588824961796&di=7147d99cfd1da40ef0a182929225cb26&imgtype=0&src=http%3A%2F%2Fp0.so.qhimgs1.com%2Ft015d8b4bf1f20f929c.jpg"
      style="width: 100%;height: 100%;opacity:0.8;display:block;">
    <div class="x1">
      <p>昕</p>
      <p>酱</p>
      <p>天</p>
      <p>下</p>
      <p>第</p>
      <p>一</p>
      <p>❤️</p>
    </div>
    <!-- <div class="x6">
      <p>张</p>
      <p>子</p>
      <p>杰</p>
      <p>是</p>
      <p>臭</p>
      <p>猪</p>
      <p>🐷</p>
    </div> -->
    <!-- <div class="x7">
      <p>小</p>
      <p>🐑</p>
    </div> -->
    <div class="x2">
      <p>只</p>
      <p>要</p>
      <p>是</p>
      <p>活</p>
      <p>着</p>
      <p>的</p>
      <p>东</p>
      <p>西</p>
    </div>
    <div class="x3">
      <p>就</p>
      <p>算</p>
      <p>是</p>
      <p>神</p>
      <p>我</p>
      <p>也</p>
      <p>会</p>
      <p>杀</p>
      <p>给</p>
      <p>你</p>
      <p>看</p>
    </div>
    <button id="btn20" value="xs" class="x4">你能点一下吗？</button>
    <div class="x5" id="dv">我让你点你就点，你是猪咩？qaq</div>
  </div>
</body>
<script>


  var snow = function () {
    var b = document.getElementById("christmasCanvas"), a = b.getContext("2d"), d = window.innerWidth,
      c = window.innerHeight;
    b.width = d;
    b.height = c;
    for (var e = [], b = 0; b < 70; b++) {
      e.push({ x: Math.random() * d, y: Math.random() * c, r: Math.random() * 4 + 1, d: Math.random() * 70 })
    }
    var h = 0;
    window.intervral4Christmas = setInterval(function () {
      a.clearRect(0, 0, d, c);
      a.fillStyle = "rgba(255, 255, 0, 0.6)";
      a.shadowBlur = 5;
      a.shadowColor = "rgba(255, 255, 255, 0.9)";
      a.beginPath();
      for (var b = 0; b < 70; b++) {
        var f = e[b];
        a.moveTo(f.x, f.y);
        a.arc(f.x, f.y, f.r, 0, Math.PI * 2, !0)
      }
      a.fill();
      h += 0.01;
      for (b = 0; b < 70; b++) {
        if (f = e[b], f.y += Math.cos(h + f.d) + 1 + f.r / 2, f.x += Math.sin(h) * 2, f.x > d + 5 || f.x < -5 || f.y > c) {
          e[b] = b % 3 > 0 ? { x: Math.random() * d, y: -10, r: f.r, d: f.d } : Math.sin(h) > 0 ? {
            x: -5,
            y: Math.random() * c,
            r: f.r,
            d: f.d
          } : { x: d + 5, y: Math.random() * c, r: f.r, d: f.d }
        }
      }
    }, 70)
  }
  snow();
  !function (e, t, a) { function r() { for (var e = 0; e < s.length; e++) s[e].alpha <= 0 ? (t.body.removeChild(s[e].el), s.splice(e, 1)) : (s[e].y-- , s[e].scale += .004, s[e].alpha -= .013, s[e].el.style.cssText = "left:" + s[e].x + "px;top:" + s[e].y + "px;opacity:" + s[e].alpha + ";transform:scale(" + s[e].scale + "," + s[e].scale + ") rotate(45deg);background:" + s[e].color + ";z-index:99999"); requestAnimationFrame(r) } function n() { var t = "function" == typeof e.onclick && e.onclick; e.onclick = function (e) { t && t(), o(e) } } function o(e) { var a = t.createElement("div"); a.className = "heart", s.push({ el: a, x: e.clientX - 5, y: e.clientY - 5, scale: 1, alpha: 1, color: c() }), t.body.appendChild(a) } function i(e) { var a = t.createElement("style"); a.type = "text/css"; try { a.appendChild(t.createTextNode(e)) } catch (t) { a.styleSheet.cssText = e } t.getElementsByTagName("head")[0].appendChild(a) } function c() { return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")" } var s = []; e.requestAnimationFrame = e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function (e) { setTimeout(e, 1e3 / 60) }, i(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"), n(), r() }(window, document);
  function my$(id) {
    return document.getElementById(id);
  }
  my$("btn20").onclick = function () {
    if (this.value === "yc") {
      my$("dv").style.display = "none";
      this.value = "xs";
    } else if (this.value === "xs") {
      my$("dv").style.display = "block";
      this.value = "yc";
    }
  };
</script>

</html>